<template>
  <div v-if="sso" />
  <common-layout v-else>
    <div class="top">
      <div class="header">
        <component :is="logoS" v-if="!$store.state.setting.baseAppNameShow" /><span class="login-logo-text">登录{{
          $store.state.setting.baseAppNameShow?$store.getters['setting/appBaseName']:'海航技术飞机健康监控管理系统' }}</span>
      </div>
    </div>
    <div class="login">
      <a-form :form="form" @submit="onSubmit">
        <a-form-item label="账号">
          <a-input
            v-decorator="['username', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]"
            autocomplete="autocomplete"
            size="large"
            placeholder="您的账号"
          />
        </a-form-item>
        <a-form-item label="密码">
          <a-input
            v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
            size="large"
            placeholder="密码"
            autocomplete="autocomplete"
            type="password"
          />
        </a-form-item>
        <div />
        <a-form-item>
          <a-button :loading="logging" style="width: 100%;margin-top: 16px" size="large" html-type="submit" type="primary">登录</a-button>
        </a-form-item>

      </a-form>
    </div>
  </common-layout>
</template>

<script>
import CommonLayout from '@/layouts/CommonLayout';
// import { loadRoutes } from '@/utils/routerUtil';
import { mapState, mapActions } from 'vuex';
import logoS from '@/assets/img/logoS.svg';
export default {
  name: 'Login',
  components: { CommonLayout },
  data() {
    return {
      logoS,
      sso: false,
      form: this.$form.createForm(this)
    };
  },
  computed: {
    ...mapState('user', [
      'logging'
    ]),
    systemName() {
      return this.$store.state.setting.systemName;
    }
  },
  mounted() {
    if (process.env.VUE_APP_CURENV === 'sso-production' || process.env.VUE_APP_CURENV === 'sso-development') {
      this.afterLogin();
      this.sso = true;
    }
  },
  methods: {
    ...mapActions('user', [
      'login',
      'afterLogin'
    ]),
    onSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err) => {
        if (!err) {
          const username = this.form.getFieldValue('username');
          const password = this.form.getFieldValue('password');
          this.login({ username, password });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
  @import './index.less';
</style>
